<template>
  <div style="margin: 20px;" v-loading.lock="loading" element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading">
    <h2>默认首页</h2>
    <div>在表格中使用的按钮</div>
    <el-button plain type="primary" size="mini">编辑</el-button>
    <el-button plain type="success" size="mini">接收</el-button>
    <el-button plain type="success" size="mini">上线</el-button>
    <el-button plain type="danger" size="mini">下线</el-button>
    <el-button plain type="warning" size="mini">二维码管理</el-button>

    <el-button plain size="mini" @click="showLoading">全局loading</el-button>
    <el-button plain size="mini" @click="showCurrLoading">当前页面loading</el-button>
    <el-button plain type="danger" size="mini" @click="deleteBtn">删除</el-button>

    <el-button plain size="mini" @click="openMap">打开地图</el-button>


    <h2>my-table 组件测试</h2>
    <my-table ref="myTableRef" stripe border highlight-current-row align="center" size="medium" :columns="columns"
      :loader="loader" :page-size="pageSize" :page="page"
      :pagination="{layout:'->, total, sizes, prev, pager, next, jumper',pageSizes: [5,10, 30, 50, 100]}">
      <template v-slot:operate="{row}">
        <el-button plain size="mini"><i class="el-icon-bottom"></i> 下载</el-button>
      </template>
    </my-table>

    <h2>上传</h2>
    <el-upload ref="fileIdStrRef" list-type="picture-card" action="" :multiple="true" accept="image/*"
      :file-list="fileList" :http-request="uploadActivityImg" :on-success="uploadOnSuccess" :on-error="uploadOnError"
      :on-remove="uploadOnRemove">
      <i class="el-icon-plus"></i>
    </el-upload>

    <div style="height: 500px;"></div>


    <map-index ref="mapIndexRef"></map-index>
  </div>
</template>

<script>
  import {
    qrCodeList
  } from '@/api/qRcode.js'
  import {
    fileUpload
  } from '@/api/upload'

  import MapIndex from '@/views/map/mapIndex.vue'


  export default {
    components: {
      MapIndex
    },
    data() {
      return {
        loading: false,

        page: 1,
        pageSize: 10,
        columns: [{
            label: '序号',
            type: 'index',
            index: (index) => {
              return ((this.page - 1) * this.pageSize + index + 1)
            },
            align: "center",
            fixed: "left",
            width: 50
          },
          {
            label: '名称',
            prop: 'codeName'
          },
          {
            label: '编号',
            prop: 'codeNo',
            width: 190
          },
          {
            label: '安放位置',
            prop: 'codeLocation'
          },
          {
            label: '二维码类别',
            prop: 'codeTypeStr',
            width: 120
          },
          {
            label: '二维码类型',
            prop: 'codeModeStr',
            width: 120
          },
          {
            label: '导流类型	',
            prop: 'guideTypeStr',
            width: 120
          },
          {
            label: '扫码次数	',
            prop: 'total',
            width: 80
          },
          {
            label: '公众号	',
            prop: 'gzhName'
          },
          {
            label: '活动	',
            prop: 'activityName'
          },
          {
            label: '操作',
            prop: 'operate',
            fixed: "right",
            align: "center",
            width: 190
          }
        ],

        fileList: [], //在组件初始化时，显示以前的上传记录列表
      }
    },
    mounted() {

    },
    methods: {
      //加载数据
      async loader(page, pageSize) {
        var res = await qrCodeList(page, pageSize);
        this.page = page;
        this.pageSize = pageSize;
        return {
          total: res.data.length,
          list: res.data.slice((page - 1) * pageSize, page * pageSize)
        };
      },
      searchTable() {
        this.$refs.myTableRef.refresh(this.page);
      },


      showLoading() {
        //this.$loading();
        this.$utils.loading();
        setTimeout(() => {
          this.$utils.loading(false)
        }, 2000);
      },
      showCurrLoading() {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 2000);
      },

      deleteBtn() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      openMap() {
        this.$refs.mapIndexRef.open();
      },

      //上传图片
      async uploadActivityImg(data) {
        var formData = new FormData();
        formData.append('file', data.file);
        formData.append('fileName', data.file.name);
        var res = await fileUpload(formData);
        return res.data;
      },
      uploadOnSuccess(response, file, fileList) {},
      uploadOnError(err, file, fileList) {},
      uploadOnRemove(file, fileList) {},


    }
  }
</script>

<style>

</style>
